<script setup>
import Img from '../assets/yanzheng.jpg'
//引入'vue3-puzzle-vcode'插件
import Vcode from 'vue3-puzzle-vcode'
//引入路由
import { useRouter } from 'vue-router'
//获取路由器
let $router = useRouter()
//验证码模态框是否出现，默认不展示
const isShow = ref(false)
//登录按钮
const login = () => {
  //展现验证码模态框
  isShow.value = true
}
//用户通过了验证
const success = (msg) => {
  isShow.value = false
  console.log('验证通过' + msg)
  //通过验证跳转到home首页
  //验证账号密码
  formRef.value.validate(async (valid) => {
    if (valid) {
        let result=await easyapi.add("api/dologin",loginObj.value);
         console.log(result);
        if(result.code==200 && result.data){
            //登陆成功
            //存放token
            sessionStorage.setItem("token",result.data);
            sessionStorage.setItem("username",loginObj.value.username);
            //提示
            ElMessage({
                type: 'success',
                message: result.message
            });
            setTimeout(function(){
                //js代码跳转
                router.push("/index");
            },2000);
            if(remPassword.value){
                localStorage.setItem("username",loginObj.value.username);
                localStorage.setItem("password",loginObj.value.password);
            }else{
                localStorage.removeItem("username");
                localStorage.removeItem("password");
            }
        }else{
            ElMessage({
                type: 'info',
                message: '登录失败  请检查账号密码是否正确'
            });
        }
    } else {
        ElMessage({
                type: 'info',
                message: '登录失败'
            });
    }
  })
}
//用户点击遮罩层，关闭模态框
const close = () => {
  isShow.value = false
}
//用户验证失败
const fail = () => {
  console.log('验证失败')
}
onMounted(async()=>{
    const savedUsername = localStorage.getItem("username");
    const savedPassword = localStorage.getItem("password");
    if(savedPassword&&savedUsername){
        loginObj.value.username = savedUsername;
        loginObj.value.password = savedPassword;
        remPassword.value = true;
    }

})
import {onMounted, reactive,ref} from 'vue'
import easyapi from '../api'
import { ElMessageBox, ElMessage } from 'element-plus'
const router = useRouter();
const formRef=ref({});
const loginObj=ref({});
const dologin=async function(){

   
    
}
const checkname=function(rule,value,callback){
    let reg=/[A-z]/;
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(loginObj.value.username)){
        callback();
    }else{
        callback(new Error('输入的格式不正确'))
    }
}

const easyrules= {
  username:[{validator:checkname,trigger:'blur'}],
  password:[]
};
const remPassword = ref(false);
</script>   
    <template>
    <div class="login-container">
        <el-row class="login-form">
            <el-col :span="24">
                <div class="login-form-wrapper">
                    <h2 class="login-title">登录</h2>
                    <el-form
                        :rules="easyrules"
                        ref="formRef"
                        :model="loginObj"
                        class="login-form-content"
                    >
    
                        <el-form-item label="用户名" label-width="100px" prop="username">
                            <el-input v-model="loginObj.username" prefix-icon="el-icon-user" autocomplete="off" />
                        </el-form-item>
    
                        <el-form-item label="密码" label-width="100px" prop="password">
                            <el-input v-model="loginObj.password" prefix-icon="el-icon-lock" type="password" autocomplete="off" />
                        </el-form-item>

                    <el-form-item label = "记住密码">
                        <el-checkbox v-model="remPassword" ></el-checkbox>
                    </el-form-item>
    
                        <el-button type="primary" class="login-button" @click="login">
                            登录
                        </el-button>
                        <Vcode :show="isShow" @success="success" @close="close" @fail="fail" :imgs="[Img]"></Vcode>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>

</template>
<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    background-image: url("../images/2.png");
    background-size: 100% 100%;

}

.login-form-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: rgba(255, 0, 0, 0);
    border-width: 0;
    
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
}

.login-form-content {
    width: 300px;
}

.login-button {
    width: 100%;
    margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .login-form-content {
        width: 100%;
    }
}
</style>
